<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      lang="en">
<head>
    <meta charset="utf-8">
    <title th:text="${ficBook.getFicName()}"></title>
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <link media="all" rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/layui.css}">
    <script charset="UTF-8" th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script charset="utf-8" th:src="@{/layui-v2.6.4/layui/layui.js}"></script>
</head>
<style type="text/css">
    a:hover {
        color: darkblue;
        cursor: pointer;
    }
</style>
<body>
<div class="div_top" th:replace="include/top"></div>
<script th:inline="javascript" type="text/javascript">
    // 提交评论认证
    function commitComment() {
        if ($("#comments").val() == "" || $("#comments").val().matches("\s") == true) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.msg("您还没有评论", {time: 2000, offset: ['780px', '1200px'], fixed: false})
            })
            return false;
        }
        $("#comments").val("")
        return true;
    }

    layui.use('layer', function () {
        var layer = layui.layer;
        // 信息框   信息，  参数，  回调函数
        layer.msg('斗破苍穹', {offset: '260px', icon: 6}, function () {
            //  弹出框   信息， 参数， 回调函数
            layer.alert("您已经回到首页", {icon: 1, time: 2000, offset: '360px', closeBtn: 2, title: '友情提示！'})
        })
        // layer.msg("斗破苍穹")
    })

    layui.use(['rate'], function () {
        var rate = layui.rate;
        rate.render({
            elem: '.star',
            value: 5,  // 初始默认3.5星
            half: true, // 开启半星效果
            text: true,   // 是否显示星级文本
        })
    });
    var fic_img = /*[[${ficBook.getFicImg()}]]*/ "fengmian.png";
    $(function () {
        $("#fic_fengmian").attr('src', 'img/fiction/' + fic_img);
    })

    // 字体闪闪发光
    function changeColor() {
        var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|purple";
        color = color.split("|");
        var blks = document.getElementsByClassName("blink");
        for (var i = 0; i < blks.length; i++) {
            blks[i].style.color = color[parseInt(Math.random() * color.length)];
        }
    }

    setInterval("changeColor()", 2000);
</script>
<div class="layui-fluid" style="padding: 0;background: #FFFFFF">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>热门</legend>
    </fieldset>
    <div class="layui-container">
        <ul class="flow-default layui-nav layui-row " id="hostFiction" style="background-color: white;"></ul>
    </div>
    <div class="layui-row layui-col-space10">
        <!-- 列嵌套，向左偏移3个，以达到中间  -->
        <div class="layui-col-md-offset2 layui-col-xs-offset1">
            <!-- 栅格内边距10px  -->
            <div class="layui-row grid-demo layui-col-space10">
                <!-- 书籍图片1/3 -->
                <div class="layui-col-lg3 layui-col-md4 layui-col-xs11 layui-col-sm4">
                    <img id="fic_fengmian" src="img/fiction/fengmian.png" width="100%">
                </div>
                <!-- 书籍信息2/3 -->
                <div class="layui-col-lg8 layui-col-md7 layui-col-xs12 layui-col-sm7">
                    <br>
                    <h1 th:text="${ficBook.getFicName()}"></h1>
                    <br>
                    <p>
                        <button class="layui-btn layui-btn-xs layui-btn-warm"><a
                                href="https://www.qidian.com/finish">完结</a></button>
                        <button class="layui-btn layui-btn-xs layui-btn-normal"><a
                                href="https://www.qidian.com/free">免费</a></button>
                    </p>
                    <br>
                    <p th:text="${ficBook.getFicType()+','+data.getFicData().substring(0,8)}"></p>
                    <br>
                    <p>124万字 | 12424总推荐 |2420周推荐</p>
                    <br>
                    <p>
                        <button class="layui-btn layui-btn-xs layui-btn-primary layui-border-blue layui-btn-radius">
                            <a th:href="@{/toContentPage(bid=${ficBook.getId()})}"><i
                                    class="layui-icon layui-icon-read"></i>免费试读</a>
                        </button>
                        <button class="layui-icon layui-btn layui-btn-xs layui-btn-primary layui-border-blue layui-btn-radius">
                            <a href=""><i class="layui-icon layui-icon-add-circle-fine"></i>加入书架</a>
                        </button>
                        <button class="layui-btn layui-btn-xs layui-border-blue layui-btn-primary layui-btn-radius">
                            <a href=""><i class="layui-icon layui-icon-chat"></i>投推荐票</a>
                        </button>
                        <button class="layui-btn layui-border-red layui-btn-xs layui-btn-disabled layui-btn-radius">
                            <i class="layui-icon layui-icon-tips"></i>投诉
                        </button>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- 定位到书籍信息下放 -->
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md-offset1 layui-col2">
            <div class="layui-col-md-offset1 layui-col-xs-offset1  layui-col-xs10 layui-col-md10">
                <!-- 选项卡支持 过滤器 -->
                <div class="layui-tab" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">信息</li>
                        <li>目录</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <p th:text="${data.getFicData()}"></p>
                            <!--								<textarea cols="130" rows="15" readonly="readonly"-->
                            <!--                                          style="border: 0;background:  white;font-size: 20px; resize: none;"-->
                            <!--                                          th:text="${data.getFicData()}">-->
                            <!--								</textarea>-->
                        </div>
                        <div class="layui-tab-item">
                            <table class="layui-table" lay-even lay-skin="nob" style="background-color: #fff0;">
                                <colgroup>
                                    <col width="400">
                                    <col width="400">
                                    <col width="400">
                                    <col>
                                </colgroup>
                                <tbody>
                                <tr style="background-color: #fff0;">
                                    <td style="background-color: #fff0;"><a
                                            th:href="@{/toContentPage(bid=${ficBook.getId()})}"><i
                                            class="layui-icon layui-icon-read"></i>
                                        第一章：乌坦城</a></td>
                                </tr>
                                <tr style="background-color: #fff0;">
                                    <td style="background-color: #fff0;"><a
                                            th:href="@{/toContentPage(bid=${ficBook.getId()})}"><i
                                            class="layui-icon layui-icon-read"></i>
                                        第二章：莫欺少年穷</a></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--  评论  -->
    <div class="layui-row">
        <div class="layui-col-md6 layui-col-xs8 layui-col-md-offset3 layui-col-xs-offset5">
            <label th:text="${countComment}"></label>
            <hr class="layui-border-red">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li><a id="orderByFire"
                           th:href="@{/comment/orderByFire(ficid=${currentId},index=${currentIndex})}"><i
                            class="layui-icon layui-icon-fire"> 按热度排序</i></a></li>
                    <li><a id="orderByTime"
                           th:href="@{/comment/orderByTime(ficid=${currentId},index=${currentIndex})}"><i
                            class="layui-icon layui-icon-time"> 按时间排序</i></a></li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <li>
                            <!-- 头像 -->
                            <div class="layui-col-md1 layui-col-xs2" style="top: 20px;border-radius: 50px;">
                                <img class="layui-circle" height="48px" style="margin-left: 20px"
                                     th:src="@{/img/18.jpg}"
                                     width="48px">
                            </div>
                            <form action="/comment/addComment" method="post" onsubmit="return commitComment()">
                                <!-- 用户及评论 -->
                                <div class="layui-col-md7 layui-col-xs8">
                                    <!-- 评论 -->
                                    <div style="margin: 10px 15px;">
                                        <input name="ficid" th:value="${currentId}" type="hidden">
                                        <input name="index" th:value="${currentIndex}" type="hidden">
                                        <textarea cols="80" id="comments" name="comment" placeholder="发表一条友善的评论"
                                                  rows="5" style="
                                              background:  whitesmoke;
                                              /*width: 100%;*/
                                              height: 65px;
                                              transition: 0s;
                                              padding: 10px 10px;
                                              outline: none;
                                              overflow: auto;
                                              display: inline-block;
                                              border-radius: 4px;
                                              border: 1px solid blue;
                                              line-height: normal;
                                              box-sizing: border-box;
                                              font-size: 17px; resize: none;
                                               overflow-scrolling: unset"></textarea>
                                    </div>
                                </div>
                                <div class="layui-col-md4 layui-col-xs2">
                                    <button id="btnsub" style="display: inline-block;
                                        position: absolute;
                                        top: 8px;
                                        right: 2%;
                                        width: 65px;
                                        height: 65px;
                                        padding:4px 15px;
                                        min-width:60px;
                                        cursor: pointer;
                                        vertical-align: top;
                                        transition: 0.1s;
                                        text-align: center;
                                        border: 1px solid blue;
                                        border-radius: 4px;
                                        background: cornflowerblue;
                                        font-size: 14px" type="submit">发表评论
                                    </button>
                                </div>
                            </form>
                            <hr class="layui-border-blue">
                        </li>
                        <div>
                            <span th:text="${nocom}"></span>
                            <!-- 各个用户 -->
                            <ul th:each="comments : ${comment}">
                                <!-- 用户x -->
                                <li>
                                    <!-- 头像 -->
                                    <div class="layui-col-md1 layui-col-xs3" style="top: 15px;">
                                        <img class="layui-circle" height="48px" style="margin-left: 20px"
                                             th:src="${comments.getFicId()}" width="48px">
                                    </div>
                                    <!-- 用户及评论 -->
                                    <div class="layui-col-md7 layui-col-xs9">
                                        <div>
                                            <a class="blink" href="" style="margin: 10px 15px;color: darkmagenta"
                                               th:text="${comments.userId}"></a>
                                        </div>
                                        <!-- 评论 -->
                                        <div style="margin: 10px 15px;" th:text="${comments.commData}"></div>
                                        <!-- 日期、赞、回复 -->
                                        <div style="width: 850px;height: 40px;">
                                            <div style="float: left;margin: 10px 15px;"
                                                 th:text="${comments.gmtCreate}"></div>
                                            <div style="float: right;padding: 10px 5px;margin-left: 10px;">
                                                <a href=""><i class="layui-icon layui-icon-praise"> 12</i></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href=""><i class="layui-icon layui-icon-tread"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                            </div>
                                            <div>
                                                <div class="star" style="float: right;"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <hr class="layui-border-blue">
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>
